import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { Title } from 'bee/components/MakePlan';
import Radio from 'bee/components/Radio';
import { px2dp } from 'bee/utils/px2dp';
import { sizes, colors } from 'bee/themes';

export default function Notes({ selected, onPress }) {
  return (
    <View style={styles.section}>
      <Title title="投保须知" />
      <View style={styles.knowView}>
        <View style={styles.radioView}>
          <Radio
            selected={selected}
            onPress={value => {
              onPress(!value);
            }}
          />
        </View>

        <Text style={styles.text}>
          我已阅读投保须知，将如实填写各项信息XXXX
          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXX
        </Text>
      </View>
    </View>
  );
}

Notes.propTypes = {
  selected: PropTypes.bool.isRequired,
  onPress: PropTypes.func.isRequired,
};

const styles = StyleSheet.create({
  section: {
    backgroundColor: colors.white,
    marginBottom: px2dp(20),
  },
  knowView: {
    flexDirection: 'row',
    paddingHorizontal: px2dp(64),
    paddingVertical: px2dp(26),
    justifyContent: 'flex-start',
  },
  radioView: {
    justifyContent: 'flex-start',
    marginTop: px2dp(6),
  },
  text: {
    fontSize: sizes.f2,
    color: colors[1101],
    marginLeft: px2dp(16),
  },
});
